
<template>
    <div class="all">
        <div class="header">学府花园智慧社区</div>
        <div class="center">
            <div class="user">
                <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3290567491,4102372164&fm=27&gp=0.jpg" alt="">
                <div class="userName">欢迎<span>野原新之助</span>回到学府花园</div>
            </div>
            <div class="list">
                <div class="list_box" v-for="(item,i) in indexTitle" :key="i" @click="$router.push({name:item.title})">
                    <img :src="item.indexImg">
                    <span>{{item.indexTitle,item.title}} </span>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    data() {
        return {
            indexTitle:[]
        }
    },
    mounted(){
        this.indexTitle = this.$blocks
    }
}
</script>


<style lang="less" scoped>
.user{
    width:100%;
    height:5rem;
    border-bottom:.4rem solid #ccc;
    background-image:url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533123882386&di=4ba5092c8d5f84a9fa0e532f97ff5e74&imgtype=0&src=http%3A%2F%2Fpic38.nipic.com%2F20140211%2F13857113_164850282173_2.png');
    background-size:cover;
}
.user img{
    width:2rem;
    height:2rem;
    border-radius: 50%;
    margin-top:.7rem;
    margin-bottom:.2rem;
}
.user .userName{
    font-size:.3rem;
}
.user span{
    font-size:.5rem;
    color:blue;
    margin:0 .1rem;
}
.list{
    width:100%;
}
.list_box{
    display:block;
    float: left;
    width:33%;
    height: 3rem;
    text-align: center;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
}
.list_box:nth-of-type(3n+3){
    border-right:0px;
}
.list_box img{
    width:1.4rem;
    height:1.4rem;
    display:block;
    margin:.4rem auto .2rem auto;
}
</style>
